<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="css/carousel.css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style1.css"/>
<link href="css/style2.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/style3.css"/>
<style type="text/css">
.nav li{ position:relative;}
#banner1{
            width:900px;
            height:300px;
            margin: 0 auto;
        }
</style>

<!--<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>-->
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/nav.js" type="text/javascript" charset="utf-8"></script>
<script src="js/carousel.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="top-blank"></div>
<div class="top-head" id="headdiv">
<!--导航-->
	<div class="top01">
		<div style="width:100%; max-width:1200px; margin:0 auto;">
			<span class="l">网站简介信息</span>
			<div class="top01_center"><img src="images/top_tel_icon.jpg" width="18" height="21" /> 咨询电话：0588-8888 8888&nbsp;&nbsp;&nbsp;&nbsp;24小时服务热线：40004-888888</div>
		</div>
	</div>

	<div class="top02" style="background-color:#fff;">
		<div class="top02_center" style="width:1200px;margin:0 auto;">
			<div class="logo"><a href="#"><img src="images/logo.jpg" width="361" height="60" alt="深圳网站建设"  /></a></div>
			<div class="nav">
				<ul>
					<li id="m1" class="m"><a href="#" class="aa1 mmm">首页</a></li>
					<li id="m3" class="m"><a href="#" class="aa3 mmm">网站建设</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_three">
									<ul>
										<li><a href="#"><img src="images/c.png" alt="营销型网站建设" />企业营销型网站建设</a></li>
										<li><a href="#"><img src="images/c.png" alt="深圳网站建设" />创意品牌型网站建设</a></li>
										<li><a href="#"><img src="images/c.png" alt="商城网站建设" />购物商城型网站建设</a></li>
										<li><a href="#"><img src="images/c.png" alt="手机网站建设" />手机微信网站建设</a></li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li id="m6" class="m"><a href="#" class="aa6 mmm">产品服务</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_six_l">
									<a href="javascript:void(0)" class="osel">网站建设</a>
									<a href="javascript:void(0)">移动业务</a>
									<a href="javascript:void(0)">基础业务</a>
								</div>
								<div class="xiao_six_r">
									<div>
										<a href="#"><img src="images/yuming_pic17.png" />企业营销</a>
										<a href="#"><img src="images/yuming_pic18.png" />创意品牌</a>
										<a href="#"><img src="images/yuming_pic19.png" />购物商城</a>
										<a href="#"><img src="images/yuming_pic20.png" />手机微信</a>
										<a href="#"><img src="images/yuming_pic21.png" />响应式网站</a>
										<a href="#"><img src="images/yuming_pic22.png" />营销型网站建设</a>
										<a href="#"><img src="images/yuming_pic23.png" />网站改版</a>
									</div>
									<div style="display:none">
										<a href="#"><img src="images/yuming_pic13.png" />手机网站</a>
										<a href="#"><img src="images/yuming_pic14.png" />微信商城</a>
										<a href="#"><img src="images/yuming_pic15.png" />微信分销</a>
										<a href="#"><img src="images/yuming_pic16.png" />O2O电商</a>
									</div>
									<div style="display:none;">
										<a href="#"><img src="images/yuming_pic10.png" />域名注册</a>
										<a href="#"><img src="images/yuming_pic12.png" />虚拟主机</a>
										<a href="#"><img src="images/yuming_pic11.png" />企业邮箱</a>
										<a href="#"><img src="images/yuming_pic11.png" />快速排名</a>
									</div>
								</div>
								<script type="text/javascript">
								$('.xiao_six_l a').hover(function(){
									var linum = $(this).index()
									$(this).addClass('osel').siblings().removeClass('osel')
									$('.xiao_six_r div').eq(linum).show().siblings('div').hide()
								})
								</script>
							</div>
						</div>
					</li>
					<li id="m4" class="m"><a href="#" class="aa4 mmm">成功案例</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_five">
									<a href="#"><img  alt="深圳网站建设" src="images/c.png"></a>
									<a href="#"><img  alt="深圳网站制作" src="images/c.png"></a>
								</div>
								<div class="xiao_five2">
										<p><a href="#">企业营销</a><a href="#">购物商城</a></p>
										<p><a href="#">行业门户</a><a href="#">移动应用</a></p>
										<p><a href="#">外贸网站</a><a href="#">创意品牌</a></p>
								</div>
							</div>
						</div>
					</li>
					<li id="m8" class="m"><a href="#" class="aa8 mmm">解决方案</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_four l">
									<h2>解决方案</h2>
									<ul class="ul">
										<li><a href="#" >企业网站建设解决方案</a></li>
										<li><a href="#">营销型网站建设解决方案</a></li>
										<li><a href="#" >行业门户网站建设解决方案</a></li>
										<li><a href="#" >外贸网站解建设决方案</a></li>
										<li><a href="#" >品牌形象网站建设解决方案</a></li>
										<li><a href="#" >购物商城网站建设解决方案</a></li>
										<li><a href="#" >政府网站建设解决方案</a></li>
										<li><a href="#" >手机网站建设解决方案</a></li>
									</ul>
								</div>
								<div class="xiao_four l">
									<h2>我们的产品</h2>
									<ul class="ul">						
										<li><a href="#">企业营销型网站建设</a></li>
										<li><a href="#" >微信电商</a></li>
										<li><a href="#" >购物商城型网站建设</a></li>
										<li><a href="#" >微信分销</a></li>
										<li><a href="#" >创意品牌型网站建设</a></li>
										<li><a href="#" >B2B2C电商</a></li>
										<li><a href="#" >手机微信网站建设</a></li>
										<li><a href="#" >O2O电商</a></li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li id="m5" class="m"><a href="#" class="aa5 mmm">新闻动态</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_three">
									<ul>
										<li><a href="#"><img src="images/c.png" alt="网站建设签约动态" />最新签约</a></li>
										<li><a href="#"><img src="images/c.png" alt="网站建设优化" />网站优化</a></li>
										<li><a href="#"><img src="images/c.png" alt="网站建设知识" />建站知识</a></li>
										<li><a href="#"><img src="images/c.png" alt="百度竞价托管"  />竞价托管</a></li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li id="m2" class="m"><a href="#" class="aa2 mmm">关于我们</a>
						<div class="sub">
							<div class="nav_xiao">
								<div class="xiao_three">
									<ul>
										<li><a href="#"><img src="images/c.png" alt="网站建设公司" />公司介绍</a></li>
										<li><a href="#"><img src="images/c.png"  alt="网站建设公司" />汇款方式</a></li>
										<li><a href="#"><img src="images/c.png" alt="网站建设团队" />公司团队</a></li>
										<li><a href="#"><img src="images/c.png" alt="发展历程" />发展历程</a></li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li id="m7" class="m"><a href="#" class="aa7 mmm">联系我们</a></li>
				</ul>
			</div>
			<script type="text/javascript">jQuery(".nav").slide({ type:"menu",  titCell:".m", targetCell:".sub", effect:"slideDown", delayTime:300, triggerTime:100,returnDefault:true});</script>
		</div>
	</div>
	
	<div class="shadow"></div>
	
</div>
<!--轮播-->
<div id="imageFlow">
	<div class="top">
	</div>
	<div class="bank">
		<a rel="images/1.jpg" title="Myselves" href="#">
		My identity lies in not knowing who I am</a>
		<a rel="images/2.jpg" title="Discoveries" href="#">
		...are made by not following instructions</a>
		<a rel="images/3.jpg" title="Nothing" href="#">
		...can come between us</a>
		<a rel="images/4.jpg" title="New life" href="#">
		Here you come!</a>
		<a rel="images/5.jpg" title="Optimists" href="#">
		They don&#39;t know all the facts yet</a>
		<a rel="images/6.jpg" title="Empathy" href="#">
		Emotional intimacy</a>
		<a rel="images/7.jpg" title="Much work" href="#">
		...remains to be done before we can announce our total failure to make any 
		progress</a>
		<a rel="images/8.jpg" title="System error" href="#">
		Errare Programma Est</a>
		<a rel="images/9.jpg" title="Nonexistance" href="#">
		There&#39;s no such thing</a>
		<a rel="images/10.jpg" title="Inside" href="#">
		I抦 now trapped, without hope of escape or rescue</a>
		<a rel="images/11.jpg" title="E-Slaves" href="#">
		The World is flat</a>
		<a rel="images/12.jpg" title="l0v3" href="#">
		1 l0v3 j00 - f0r3v3r</a>
		<a rel="images/13.jpg" title="T minus zero" href="#">
		111 111 111 x 111 111 111 = 12345678987654321</a>
		<a rel="images/14.jpg" title="The End" href="#">
		...has not been written yet</a> </div>
	<div class="text">
		<div class="title">
			Loading</div>
		<div class="legend">
			Please wait...</div>
	</div>
	<div class="scrollbar">
		<img class="track" src="images/track.jpg" alt="">
		<img class="arrow-left" src="images/sign_out.png" alt="">
		<img class="arrow-right" src="images/sign_in.png" alt="">
		<img class="bar" src="images/bar.jpg" alt=""> </div>
</div>

<!--图文并茂-->
<div class="app-store-box">
            <div class="app-store-head">
                <h2>App案例展示</h2>
            </div>
            <div class="app-store-wrap">
                <div class="app-store-list clearfix">
                    <div class="app-store-item item01">
                        <a href="#">
                            <img src="images/app-store-item1.png" alt="">
                            <div class="app-store-info">
                                <h3>生鲜无忧</h3>
                                <div class="app-store-tag"></div>
                            </div>
                        </a>
                    </div>
                    <div class="app-store-item item02">
                        <a href="#">
                            <img src="images/app-store-item2.png" alt="">
                            <div class="app-store-info">
                                <h3>阁楼</h3>
                                <div class="app-store-tag"></div>
                            </div>
                        </a>
                    </div>
                    <div class="app-store-item item03">
                        <a href="#">
                            <img src="images/app-store-item3.png" alt="">
                            <div class="app-store-info">
                                <h3>欧乐家装</h3>
                                <div class="app-store-tag"></div>
                            </div>
                        </a>
                    </div>
                    <div class="app-store-item item04">
                        <a href="#">
                            <img src="images/app-store-item4.png" alt="">
                            <div class="app-store-info">
                                <h3>聚焦头条</h3>
                                <div class="app-store-tag"></div>
                            </div>
                        </a>
                    </div>
                    <div class="app-store-item item05">
                        <a href="#">
                            <img src="images/app-store-item5.png" alt="">
                            <div class="app-store-info">
                                <h3>家校通</h3>
                                <div class="app-store-tag"></div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="app-store-btn">
                    <a href="#">&nbsp;&nbsp;&nbsp;更多案例&模板&nbsp;&nbsp;&nbsp;</a>
                </div>
            </div>
        </div>

<!--底部-->
<div class="bottom">
	<div class="register">
		<h2>现在注册，马上开启自己的电商业务</h2>
		<a href="#">立即注册</a>
	</div>
	<div class="footer">
		<div class="w1200">
			<div class="footer_top">
				<ul>
					<li>专注服务于电商领域</li>
					<li>7×8小时售后支持</li>
					<li>一对一专属会员经理</li>
					<li>285万用户诚意推荐</li>
				</ul>
			</div>
			<div class="footer_tel">
				<div class="tel">
					来电咨询<br>
					400-xxx-xxxx
				</div>
				<ul>
					<li>全方位的购买咨询</li>|
					<li>精准的产品推荐</li>|
					<li>专业支持的售后咨询</li>|
					<li>电商业务开展咨询</li>
				</ul>
			</div>
			<div class="footer_down">
				<div class="left">
					<h3>电商系统及行业方案</h3>
					<p>
						<a href="#">云微商城</a>
						<a href="#">云订货</a>
						<a href="#">云ERP</a>
						<a href="#">Shop</a>
						<a href="#">分销王</a>
						<a href="#">会员通</a>
						<a href="#">货店通</a>
						<a href="#">情报魔方</a>
						<a href="#">淘打</a>
						<a href="#">Shopex</a>
						<a href="#">mall</a>
						<a href="#">Shop APP</a>
					</p>
				</div>
				<div class="flink">
					<h3>友情链接</h3>
					<p>
						<a href="#">使用帮助</a>
						<a href="#">服务社区</a>
						<a href="#">经典案例</a>
						<a href="#">商城官网</a>
					</p>
				</div>
				<div class="right">
					<ul>
						<li>
							<img src="images/dy_ewm.png" alt="" />
							<h3>云订阅号</h3>
						</li>
						<li>
							<img src="images/dy_ewm.png" alt="" />
							<h3>云服务号</h3>
						</li>								
					</ul>
				</div>
			</div>
			<div class="footer_copyright">
				<p>软件企业编号© 2003-2017 Shop,Inc.All rights reserved.</p>
				<p class="beian"><a href="#"><img src="images/ba.png"/>&nbsp;沪公网安备 xxxxxxxxxx号</a> <a href="#"><img src="images/gs.gif"/>&nbsp;上海工商</a></p>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
$(window).scroll(function(){
	//控制导航
	if($(window).scrollTop()<100){
		$('#headdiv').stop().animate({"top":"0px"},200);
		$('.logo').css("padding-top","20px");
		$('.nav .mmm').css("padding-top","50px");
		$('.nav .sub').css("top","125px");
		$('.top02').css("height","95px");
		
	}else{
		$('#headdiv').stop().animate({"top":"-30px"},200);
		$('.top02').css("height","75px");
		$('.logo').css("padding-top","3px");
		$('.nav .mmm').css("padding-top","30px");
		$('.nav .sub').css("top","75px");
	}
});

 window.onload = function(){
            var banner1 = new Carousel();
            //图片地址数组。不要少于三张
            var imgSrcDate = ["images/a1.png","images/a2.png","images/a3.png","images/a4.png","images/a5.png","images/a6.png"];
            banner1.init({
                container:"#banner1",
                datas:imgSrcDate,
                autoplaySpeed:3000,
                autoplay:true
            });
            

        }
 
 
 	var imf = function () {
	var lf = 0;
	var instances = [];
	//定义一个通过class获得元素的方法
	function getElementsByClass (object, tag, className) {
		var o = object.getElementsByTagName(tag);
		for ( var i = 0, n = o.length, ret = []; i < n; i++)
			if (o[i].className == className) ret.push(o[i]);
		if (ret.length == 1) ret = ret[0];
		return ret;
	}
	function addEvent (o, e, f) {
		if (window.addEventListener) o.addEventListener(e, f, false);
		else if (window.attachEvent) r = o.attachEvent('on' + e, f);
	}
	function createReflexion (cont, img) {
		var flx = false;
		if (document.createElement("canvas").getContext) {
			flx = document.createElement("canvas");
			flx.width = img.width;
			flx.height = img.height;
			var context = flx.getContext("2d");
			context.translate(0, img.height);
			context.scale(1, -1);
			context.drawImage(img, 0, 0, img.width, img.height);
			context.globalCompositeOperation = "destination-out";
			var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
			gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
			gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
			context.fillStyle = gradient;
			context.fillRect(0, 0, img.width, img.height * 2);
		} else {
			/* ---- DXImageTransform ---- */
			flx     = document.createElement('img');
			flx.src = img.src;
			flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
			                   'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
							   (img.height * .25) + ')';
		}
		/* ---- insert Reflexion ---- */
		flx.style.position = 'absolute';
		flx.style.left     = '-1000px';
		cont.appendChild(flx);
		return flx;
	}
	/* //////////// ==== ImageFlow Constructor ==== //////////// */
	function ImageFlow(oCont, size, zoom, border) {
		this.diapos     = [];
		this.scr        = false;
		this.size       = size;
		this.zoom       = zoom;
		this.bdw        = border;
		this.oCont      = oCont;
		this.oc         = document.getElementById(oCont);
		this.scrollbar  = getElementsByClass(this.oc,   'div', 'scrollbar');
		this.text       = getElementsByClass(this.oc,   'div', 'text');
		this.title      = getElementsByClass(this.text, 'div', 'title');
		this.legend     = getElementsByClass(this.text, 'div', 'legend');
		this.bar        = getElementsByClass(this.oc,   'img', 'bar');
		this.arL        = getElementsByClass(this.oc,   'img', 'arrow-left');
		this.arR        = getElementsByClass(this.oc,   'img', 'arrow-right');
		this.bw         = this.bar.width;
		this.alw        = this.arL.width - 5;
		this.arw        = this.arR.width - 5;
		this.bar.parent = this.oc.parent  = this;
		this.arL.parent = this.arR.parent = this;
		this.view       = this.back       = -1;
		this.resize();
		this.oc.onselectstart = function () { return false; }
		/* ---- create images ---- */
		var img   = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
		this.NF = img.length;
		for (var i = 0, o; o = img[i]; i++) {
			this.diapos[i] = new Diapo(this, i,
										o.rel,
										o.title || '- ' + i + ' -',
										o.innerHTML || o.rel,
										o.href || '',
										o.target || '_self'
			);
		}
		/* ==== add mouse wheel events ==== */
		if (window.addEventListener)
			this.oc.addEventListener('DOMMouseScroll', function(e) {
				this.parent.scroll(-e.detail);
			}, false);
		else this.oc.onmousewheel = function () {
			this.parent.scroll(event.wheelDelta);
		}
		/* ==== scrollbar drag N drop ==== */
		this.bar.onmousedown = function (e) {
			if (!e) e = window.event;
			var scl = e.screenX - this.offsetLeft;
			var self = this.parent;
			/* ---- move bar ---- */
			this.parent.oc.onmousemove = function (e) {
				if (!e) e = window.event;
				self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
				self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
				if (self.view != self.back) self.calc();
				return false;
			}
			/* ---- release scrollbar ---- */
			this.parent.oc.onmouseup = function (e) {
				self.oc.onmousemove = null;
				return false;
			}
			return false;
		}
		/* ==== right arrow ==== */
		this.arR.onclick = this.arR.ondblclick = function () {
			if (this.parent.view < this.parent.NF - 1)
				this.parent.calc(1);
		}
		/* ==== Left arrow ==== */
		this.arL.onclick = this.arL.ondblclick = function () {
			if (this.parent.view > 0)
				this.parent.calc(-1);
		}
	}
	/* //////////// ==== ImageFlow prototype ==== //////////// */
	ImageFlow.prototype = {
		/* ==== targets ==== */
		calc : function (inc) {
			if (inc) this.view += inc;
			var tw = 0;
			var lw = 0;
			var o = this.diapos[this.view];
			if (o && o.loaded) {
				/* ---- reset ---- */
				var ob = this.diapos[this.back];
				if (ob && ob != o) {
					ob.img.className = 'diapo';
					ob.z1 = 1;
				}
				/* ---- update legend ---- */
				this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
				this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
				/* ---- update hyperlink ---- */
				if (o.url) {
					o.img.className = 'diapo link';
					window.status = 'hyperlink: ' + o.url;
				} else {
					o.img.className = 'diapo';
					window.status = '';
				}
				/* ---- calculate target sizes & positions ---- */
				o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
				var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
				var x = x0 + o.w1 + this.bdw;
				for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
					if (o.loaded) {
						o.x1 = x;
						o.w1 = (this.ht / o.r) * this.size;
						x   += o.w1 + this.bdw;
						tw  += o.w1 + this.bdw;
					}
				}
				x = x0 - this.bdw;
				for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
					if (o.loaded) {
						o.w1 = (this.ht / o.r) * this.size;
						o.x1 = x - o.w1;
						x   -= o.w1 + this.bdw;
						tw  += o.w1 + this.bdw;
						lw  += o.w1 + this.bdw;
					}
				}
				/* ---- move scrollbar ---- */
				if (!this.scr && tw) {
					var r = (this.ws - this.alw - this.arw - this.bw) / tw;
					this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
				}
				/* ---- save preview view ---- */
				this.back = this.view;
			}
		},
		/* ==== mousewheel scrolling ==== */
		scroll : function (sc) {
			if (sc < 0) {
				if (this.view < this.NF - 1) this.calc(1);
			} else {
				if (this.view > 0) this.calc(-1);
			}
		},
		/* ==== resize  ==== */
		resize : function () {
			this.wh = this.oc.clientWidth;
			this.ht = this.oc.clientHeight;
			this.ws = this.scrollbar.offsetWidth;
			this.calc();
			this.run(true);
		},
		/* ==== move all images  ==== */
		run : function (res) {
			var i = this.NF;
			while (i--) this.diapos[i].move(res);
		}
	}
	/* //////////// ==== Diapo Constructor ==== //////////// */
	Diapo = function (parent, N, src, title, text, url, target) {
		this.parent        = parent;
		this.loaded        = false;
		this.title         = title;
		this.text          = text;
		this.url           = url;
		this.target        = target;
		this.N             = N;
		this.img           = document.createElement('img');
		this.img.src       = src;
		this.img.parent    = this;
		this.img.className = 'diapo';
		this.x0            = this.parent.oc.clientWidth;
		this.x1            = this.x0;
		this.w0            = 0;
		this.w1            = 0;
		this.z1            = 1;
		this.img.parent    = this;
		this.img.onclick   = function() { this.parent.click(); }
		this.parent.oc.appendChild(this.img);
		/* ---- display external link ---- */
		if (url) {
			this.img.onmouseover = function () { this.className = 'diapo link';	}
			this.img.onmouseout  = function () { this.className = 'diapo'; }
		}
	}
	/* //////////// ==== Diapo prototype ==== //////////// */
	Diapo.prototype = {
		/* ==== HTML rendering ==== */
		move : function (res) {
			if (this.loaded) {
				var sx = this.x1 - this.x0;
				var sw = this.w1 - this.w0;
				if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
					/* ---- paint only when moving ---- */
					this.x0 += sx * .1;
					this.w0 += sw * .1;
					if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
						/* ---- paint only visible images ---- */
						this.visible = true;
						var o = this.img.style;
						var h = this.w0 * this.r;
						/* ---- diapo ---- */
						o.left   = Math.round(this.x0) + 'px';
						o.bottom = Math.floor(this.parent.ht * .25) + 'px';
						o.width  = Math.round(this.w0) + 'px';
						o.height = Math.round(h) + 'px';
						/* ---- reflexion ---- */
						if (this.flx) {
							var o = this.flx.style;
							o.left   = Math.round(this.x0) + 'px';
							o.top    = Math.ceil(this.parent.ht * .75 + 1) + 'px';
							o.width  = Math.round(this.w0) + 'px';
							o.height = Math.round(h) + 'px';
						}
					} else {
						/* ---- disable invisible images ---- */
						if (this.visible) {
							this.visible = false;
							this.img.style.width = '0px';
							if (this.flx) this.flx.style.width = '0px';
						}
					}
				}
			} else {
				/* ==== image onload ==== */
				if (this.img.complete && this.img.width) {
					/* ---- get size image ---- */
					this.iw     = this.img.width;
					this.ih     = this.img.height;
					this.r      = this.ih / this.iw;
					this.loaded = true;
					/* ---- create reflexion ---- */
					this.flx    = createReflexion(this.parent.oc, this.img);
					if (this.parent.view < 0) this.parent.view = this.N;
					this.parent.calc();
				}
			}
		},
		/* ==== diapo onclick ==== */
		click : function () {
			if (this.parent.view == this.N) {
				/* ---- click on zoomed diapo ---- */
				if (this.url) {
					/* ---- open hyperlink ---- */
					window.open(this.url, this.target);
				} else {
					/* ---- zoom in/out ---- */
					this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
					this.parent.calc();
				}
			} else {
				/* ---- select diapo ---- */
				this.parent.view = this.N;
				this.parent.calc();
			}
			return false;
		}
	}
	/* //////////// ==== public methods ==== //////////// */
	return {
		/* ==== initialize script ==== */
		create : function (div, size, zoom, border) {
			/* ---- instanciate imageFlow ---- */
			var load = function () {
				var loaded = false;
				var i = instances.length;
				while (i--) if (instances[i].oCont == div) loaded = true;
				if (!loaded) {
					/* ---- push new imageFlow instance ---- */
					instances.push(
						new ImageFlow(div, size, zoom, border)
					);
					/* ---- init script (once) ---- */
					if (!imf.initialized) {
						imf.initialized = true;
						/* ---- window resize event ---- */
						addEvent(window, 'resize', function () {
							var i = instances.length;
							while (i--) instances[i].resize();
						});
						/* ---- stop drag N drop ---- */
						addEvent(document.getElementById(div), 'mouseout', function (e) {
							if (!e) e = window.event;
							var tg = e.relatedTarget || e.toElement;
							if (tg && tg.tagName == 'HTML') {
								var i = instances.length;
								while (i--) instances[i].oc.onmousemove = null;
							}
							return false;
						});
						/* ---- set interval loop ---- */
						setInterval(function () {
							var i = instances.length;
							while (i--) instances[i].run();
						}, 16);
					}
				}
			}
			/* ---- window onload event ---- */
			addEvent(window, 'load', function () { load(); });
		}
	}
}();

/* ==== create imageFlow ==== */
//          div ID    , size, zoom, border
imf.create("imageFlow", 0.15, 1.5, 10);
</script>


<!--<div style="height:2000px;"></div>-->

</body>
</html>